<template>
  <div class="app-container">
    <el-form ref="ruleForm" label-width="120px" label-position="left">
      <el-form-item label="星级评价">
        <el-rate v-model="evaluationScore" show-text :allow-half="true" :disabled="true" />
      </el-form-item>
    </el-form>
    <el-table v-loading="listLoading" :data="list" height="400" style="width: 100%;margin-top:10px; overflow:auto" border>
      <el-table-column label="序号" type="index" header-align="center" align="center" width="80" />
      <el-table-column header-align="center" align="left" label="操作" width="140">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleView(scope)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="评价人">
        <template slot-scope="scope">
          <span>{{ scope.row.evaluatorName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="评价分数">
        <template slot-scope="scope">
          <span>{{ scope.row.evaluationScore }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="留言" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.message }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="xmViewVisible" append-to-body width="640px" title="查看评价">
      <xm-view v-if="xmViewVisible" ref="xmView" :proid="code" :visible.sync="xmViewVisible" />
    </el-dialog>
  </div>
</template>

<script>

import { getEvaluateList } from '@/api/publicFileEvaluate'

import XmView from './evaluateView' // eslint-disable-line no-unused-vars

export default {
  components: { XmView },
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      xmViewVisible: false,
      evaluationScore: '',
      list: [],
      code: ''
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.list = []
      this.listLoading = true

      getEvaluateList({ fileId: this.proid }).then(response => {
        const { data } = response

        this.list = data.publicFileEvaluate
        this.evaluationScore = data.evaluationScore
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handleView(scope) {
      this.xmViewVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.xmView
      })
    }
  }
}
</script>

<style scoped>

</style>
